import "package:flutter/material.dart";

//按钮组件
class UseButton extends StatelessWidget {
  const UseButton({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.orange),
                  foregroundColor:
                      MaterialStateProperty.all(Colors.green)), //文字颜色
              onPressed: () {},
              child: const Text('按钮'),
            ),
            TextButton(onPressed: () {}, child: const Text('文字按钮')),
            OutlinedButton(onPressed: () {}, child: const Text("边框按钮")),
            IconButton(
                onPressed: () {},
                icon: const Icon(
                  Icons.home,
                )),
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          children: [
            ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(
                  Icons.thumb_up,
                ),
                label: const Text('按钮')),
            TextButton.icon(
                onPressed: () {},
                icon: const Icon(
                  Icons.thumb_up,
                ),
                label: const Text('按钮')),
            OutlinedButton.icon(
                onPressed: () {},
                icon: const Icon(
                  Icons.thumb_up,
                ),
                label: const Text('按钮'))
          ],
        ),
        Row(
          children: [
            Container(
              width: 200,
              height: 100,
              decoration: BoxDecoration(color: Colors.blue.shade50),
              child: ElevatedButton(
                  onPressed: () {}, child: const Text('按钮')), //如果父容器设置尺寸，则占满
            ),
          ],
        ),
        const SizedBox(
          height: 20,
        ),
        Row(
          children: [
            ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                    foregroundColor:
                        MaterialStateProperty.all(const Color(0xffffffff)),
                    backgroundColor:
                        MaterialStateProperty.all(const Color(0xff409eff)),
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(2))
                        // const CircleBorder(
                        //     side: BorderSide(color: Colors.red,width:20)), //固定圆形按钮，内边框颜色，内边框宽度
                        )), //修改圆角尺寸，默认半圆圆角
                child: const Text('按钮')),
            OutlinedButton(
                onPressed: () {},
                style: ButtonStyle(
                    // foregroundColor:
                    //     MaterialStateProperty.all(const Color(0xffffffff)),
                    // backgroundColor:
                    //     MaterialStateProperty.all(const Color(0xff409eff)),
                    // shape: MaterialStateProperty.all(
                    //   RoundedRectangleBorder(
                    //       borderRadius: BorderRadius.circular(2)),
                    // ),
                    side: MaterialStateProperty.all(const BorderSide(
                        color: Colors.red, width: 3)) //内边框颜色，内边框宽度
                    //固定圆形按钮，边框颜色，边框宽度
                    ), //修改圆角尺寸，默认半圆圆角
                child: const Text('按钮'))
          ],
        )
      ],
    );
  }
}
